<template>
  <view v-if="!isLoading">
    <view class="level_list" v-if="!isEmpty">
      <view class="l_item" v-for="(item,index) in lists" @tap="$xyfun.to('/pages/user/level/detail?id='+item.id)">
        <image class="l_icon" mode="widthFix" :src="$xyfun.image(item.image)"></image>
        <view class="l_con">
          <view class="l_tit">{{item.name}}</view>
          <view class="l_discount">折扣比例：{{item.discount}}</view>
          <view class="l_progress">
            <progress stroke-width="6" border-radius="5" activeColor="#ff4d4f" :percent="item.percent"></progress>
          </view>
          <view class="l_condition">累计消费：{{item.consume}}可升级</view>
        </view>
        <view class="l_cur" v-if="user.info.level==item.id">当前等级</view>
      </view>
    </view>
    <xy-empty text="暂无等级" v-else></xy-empty>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from "@/components/xy-empty/index.vue";

export default {
  components: {xyEmpty},
  data() {
    return {
      isLoading:true,
      isEmpty: true,
      lists: [],
    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad() {
    console.log(this.user)
    this.loadData();

  },
  methods: {

    async loadData(){
      var that = this;
      this.$api.get({
        url: '/level/lists',
        loadingTip:'加载中...',
        data: {
        },
        success: res => {
          that.isLoading = false;
          let _lists = res;
          for (let i=0;i<_lists.length;i++){
            _lists[i].percent = (parseFloat(that.user.info.xykeep_consume)/_lists[i].consume)*100;
          }
          this.lists = _lists;
          console.log(_lists)
          this.isEmpty = !this.lists.length;
        }
      });
    },
  }
}
</script>

<style lang="scss">
.level_list{
  padding: 20rpx;
  .l_item{
    display: flex;
    margin-bottom: 30rpx;
    background: #f7f7f7;
    border-radius: 14rpx;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    background: linear-gradient(to left top, $theme1, $theme2);
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: 10rpx 10rpx 20rpx #ababab;
    .l_con{
      background: #fff;
      margin-left: 30rpx;
      padding: 20rpx;
      box-sizing: border-box;
      flex-grow: 1;
      border-radius: 10rpx;
      .l_progress{
        margin-top: 20rpx;
        text-align: right;
        border-radius: 7rpx;
        overflow: hidden;
      }
      .l_condition{
        margin-top: 20rpx;
        text-align: right;
        font-size: 20rpx;
      }
      .l_discount{
        font-size: 24rpx;
        margin-top: 16rpx;
      }
      .l_tit{
        font-weight: bold;
        font-size: 28rpx;
      }
    }
    .l_icon{
      width: 150rpx;
    }
    .l_cur{
      top: 28rpx;
      right: -60rpx;
      position: absolute;
      background: $theme2;
      color: #fff;
      transform: rotate(45deg);
      font-size: 24rpx;
      padding: 4rpx 60rpx;
    }
  }
}
</style>
